import React from 'react'
import styles from './styles/modal'
import {Link} from 'react-router'

const Modal = React.createClass({

    propTypes: {
        title: React.PropTypes.string.isRequired,
        callback: React.PropTypes.func,
        static: React.PropTypes.bool,
        isAlert: React.PropTypes.bool,
        isCls: React.PropTypes.bool
    },

    getInitialState: function(){
        return {visible: false,show:false}//visible控制display,show控制动画,isCls 时候屏幕外点击可以关闭
    },

    hide: function(){
        this.setState({show:false});
       
        setTimeout(()=>{this.setState({visible: false});},300);
        if(this.props.callback && typeof this.props.callback === 'function') this.props.callback('hide');
    },
	phide:function(){
		if(!this.props.isAlert){
			this.hide();
		}
		
	},
    show: function(){
        this.setState({visible: true});
        setTimeout(()=>{this.setState({show: true});},100);
        if(this.props.callback && typeof this.props.callback === 'function') this.props.callback('show');
    },

    render: function(){
        let visibleKlass = this.state.visible ? ' visible' : '';
        let show = this.state.show?' modal-show':'';
        
        if (this.props.isAlert) {
            return (
                <div className={"modal-root alert-modal " + this.props.className + visibleKlass}>
                    <div className={"mask"+show}></div>
                    <div className={"modal-container"+show} onClick={this.phide}>
                    	 <span className = "sline"></span>
                        <div className="modal-content" onClick={e=>e.stopPropagation()}>
                            <div className="modal-header">
                                <h4 className="modal-title">{this.props.title}</h4>
                            </div>
	                           <div className="con">
	                           	{this.props.children}
	                           </div>
                        </div>
                    </div>
                </div>
            )
        }else {
            return (
                <div className={"modal-root pop-modal " + this.props.className + visibleKlass}>
                    <div className={"mask"+show} ></div>
                    <div className={"modal-container"+show} onClick={(this.hide)}>
                   	 <span className = "sline"></span>
                        <div className="modal-content" onClick={e=>e.stopPropagation()}>
                            <h4 className="modal-title">{this.props.title}<i className="iconfont right" onClick={this.hide}>&#xe668;</i></h4>
	                           <div className="con">
	                           	{this.props.children}
	                           </div>
                        </div>
                    </div>
                </div>
            );
        }
    },
})

export default Modal;
